<script lang="ts" setup>
import type { FormInst } from 'nutui-uniapp'
import mcht from '@/api/mcht'
import { useHomeStore } from '@/store'

const homeStore = useHomeStore()
const { modifyStore, modifyStoreType } = storeToRefs(homeStore)
const ruleForm = ref<FormInst | null>(null)

const loadingStore = ref<boolean>(true)
const notModifiedMDM = ref<boolean>(true)

async function getStoreInfoForNew(mchtNo: string = '') {
  const pushData: any = {}
  if (mchtNo !== '') {
    pushData.mchtNo = mchtNo
  }
  const { data } = await mcht.getStoreInfoForNew(pushData)
  if (data.status === 'success') {
    modifyStore.value = {
      storeId: data.data.storeId,
      mchtNo: data.data.mchtNo,
      storeNm: '',
      storeManager: '',
      storeTel: '',
      businessAddress: '',
      imageIds: [],
    }
  }
}

onLoad(async (options: any) => {
  if (options.storeId) {
    modifyStoreType.value = 'update'
    loadingStore.value = false
    await homeStore.getStoreInfo(options.storeId)
    loadingStore.value = true
    if (modifyStore.value.storeStatus === '3' || modifyStore.value.storeStatus === '5') {
      notModifiedMDM.value = false
    }
  }
  else {
    modifyStoreType.value = 'new'
    homeStore.resetImageList()
    modifyStore.value = {}
    // 判断页面参数有无mchtNo
    if (options.mchtNo) {
      getStoreInfoForNew(options.mchtNo)
    }
    else {
      getStoreInfoForNew(options.mchtNo)
    }
  }
})

const rules = {
  storeNm: [
    { required: true, message: '请输入门店名称' },
  ],
  storeManager: [
    { required: true, message: '请输入店长姓名' },
  ],
  storeTel: [
    { required: true, message: '请输入店长手机号' },
  ],
  businessAddress: [
    { required: true, message: '请输入完整经营地址' },
  ],
}

function clickNext() {
  // 表单校验
  ruleForm.value?.validate().then(async ({ valid }) => {
    if (valid) {
      uni.navigateTo({
        url: `/pages/home/store/input-second?storeId=${modifyStore.value.storeId}`,
      })
    }
  })
}
</script>

<template>
  <div class="input">
    <nut-form ref="ruleForm" :model-value="modifyStore" :rules="rules">
      <nut-form-item label="商户名称" prop="mchtNm" required custom-class="li-cell-box">
        <store-casader v-model="modifyStore.mchtNo" hidden-self disabled inputAlign="right" v-if="loadingStore"/>
      </nut-form-item>
      <nut-form-item label="商户号" prop="mchtNo" required custom-class="li-cell-box">
        <nut-input v-model="modifyStore.mchtNo" class="nut-input-text" placeholder="请输入商户号" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="门店名称" prop="storeNm" required custom-class="li-cell-box">
        <nut-input v-model="modifyStore.storeNm" class="nut-input-text" placeholder="请输入门店名称" type="text"
          :disabled="modifyStoreType === 'update' && notModifiedMDM" max-length="50" input-align="right" />
      </nut-form-item>
      <nut-form-item label="店长姓名" prop="storeManager" required custom-class="li-cell-box">
        <nut-input v-model="modifyStore.storeManager" class="nut-input-text" placeholder="请输入店长姓名" type="text"
          max-length="20" input-align="right" />
      </nut-form-item>
      <nut-form-item label="店长手机号" prop="storeTel" required custom-class="li-cell-box">
        <nut-input v-model="modifyStore.storeTel" class="nut-input-text" placeholder="请输入店长手机号" type="text"
          max-length="11" input-align="right" />
      </nut-form-item>
      <nut-form-item prop="businessAddress" required custom-class="li-cell-box-not li-location-lable">
        <template #label>
          <div class="label" style="display: flex">
            <span style="vertical-align: middle;">经营地址</span>
            <div class="icon" style="display: inline-block;font-size: 22px;vertical-align: middle">
              <nut-icon name="location2" size="16px" />
            </div>
          </div>
        </template>
        <location-input v-if="loadingStore" v-model="modifyStore.businessAddress"
          v-model:latitude="modifyStore.latitude" v-model:longitude="modifyStore.longitude" placeholder="请选择经营地址"
          :disabled="modifyStoreType === 'update' && modifyStore.storeStatus === '0'" />
      </nut-form-item>
    </nut-form>
    <div class="button">
      <div class="li-btn-tj shake_o" @click="clickNext">下一步
      </div>
      <!-- <nut-button type="primary" block @click="clickNext">下一步</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "门店录入",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  padding-bottom: 20px
  .button
    margin: 40px 20px


:deep(.nut-form-item__label)
  display: flex!important
  flex-direction: row!important
  min-width: 100px!important
:deep(.nut-textarea__textarea)
  text-align: right!important
</style>
